<template>
  <div class="card-box">
    <website-card v-for="web in websList.web" :web ="web"></website-card>
  </div>
  <el-pagination
      v-model:currentPage="websList.currentPage"
      :page-size="pagination.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="websTotal.web.length"
      @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">

import {getWebsite} from "../../api/website";
import {onMounted, reactive, ref} from "vue";
import WebsiteCard from "../../components/websiteCard.vue";

const websTotal=reactive({
  web:[{
    name:'',
    icon:'',
    web_description:'',
    website:'',
    tags:''
  }]
})
const websList=reactive({
  web:[{
    name:'',
    icon:'',
    web_description:'',
    website:'',
    tags:''
  }]
})

const pagination=reactive({
  // 默认页码
  currentPage:1,
  // 默认一页显示的数量
  pageSize:10
})

onMounted( ()=>{
   getWebsite().then(res=>{
    // console.log(res.data);
     websTotal.web=res.data
     websList.web=websTotal.web.slice(0,pagination.pageSize)
  })
})

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  pagination.currentPage=val
  websList.web=websTotal.web.slice( (pagination.currentPage-1)*pagination.pageSize, pagination.currentPage*pagination.pageSize)
}
</script>

<style scoped>
.card-box{
  display: flex;
  flex-wrap: wrap;
}
.el-pagination{
  position: fixed;
  bottom:20px;
  left:39%
}
</style>
